<template>
    <div class="teaching h-100">
        <elewarp>
            <span slot="search-header">数据筛选</span>
            <el-form slot="search" :inline="true" :model="search" class="demo-form-inline" ref="searchform">
                <el-form-item label="计划名称" prop="bPlanName">
                    <el-input v-model.trim="search.bPlanName" placeholder="计划名称"></el-input>
                </el-form-item>
                <el-form-item label="学生" prop="bSID">
                    <el-select v-model="search.bSID" placeholder="请选择学生" @clear="clearOptions" clearable filterable :filter-method="filterMethod">
                        <el-option :label="item.SName" :value="item.SID" v-for="item in options" :key="item.SID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教师" prop="bTID">
                    <el-select v-model="search.bTID" placeholder="请选择教师">
                        <el-option :label="item.T_Name" :value="item.TID" v-for="item in teacherList" :key="item.TID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="table-header">
                <span>教学计划列表</span>
                <!-- <el-button style="float: right;">导出</el-button> -->
                <el-button @click="addStudyInfo" style="float: right; margin-right:10px;" type="primary">添加</el-button>
            </div>
            <div slot="table">
                <!-- 表格 -->
                <el-table
                    ref="table"
                    :data="tableData"
                    stripe
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="添加时间"
                    prop="AddTime"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="PlanName"
                    label="计划名称"
                    min-width="120">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.PlanName}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="study"
                    label="学生"
                    width="110">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.SID | getStudyName(studyList)}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="teacher"
                    label="教师"
                    width="110">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.TID | getTeacherName(teacherList)}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClicklook(scope.row)" type="text" size="small"><i class="el-icon-message"></i>查看</el-button>
                            <el-button  @click="handleClickedit(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                            <el-button  @click="handleClickdelete(scope.row)" type="text" size="small"><i class="el-icon-delete"></i>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottom-pages clearfix">
                    <!-- <div class="fl">
                        <el-button  @click="handleClickSelect" >全选</el-button>
                        <el-button  @click="handleClickSelectOther">全反选</el-button>
                    </div> -->
                    <div class="fr">
                        <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize"
                        :pager-count="5"
                        layout="total, sizes, prev, pager, next"
                        :total="count">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </elewarp>
        <!-- <ele-add-study ref="addstudy"></ele-add-study> -->
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {getPlanList,deletPlanList} from '@/api/index.js'

export default {
    name: 'teaching',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            search:{
                bPlanName:'',
                bSID:'',
                bTID:''
            },
            count:0,
            pageSize:10,
            tableData:[],
            currentPage:1,
            options:[],
            tableSelection:[]
        }
    },
    filters:{
        getStudyName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].SID){
                    return data[i].SName;
                }
            }
            return '未知'
        },
        getTeacherName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].TID){
                    return data[i].T_Name;
                }
            }
            return '未知'
        },
        // getPlanName(val){
        //     let res = val.split('@');
        //     return `${res[0]}学年第${res[1] || ''}学期${res[2] || ''}教学计划`;
        // }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    watch:{
        studyList:{
            immediate:true,
            handler:function(val) {
                this.options = val;
            },
            deep:true
        }
    },
    created() {
        this._getPlanList();
    },
    methods:{
        onSubmit(){
            this._getPlanList();
        },
        onReset(){
            this.clearOptions();
            this.$refs.searchform.resetFields();
            this._getPlanList();
        },
        filterMethod(query){
            if (query !== '') {
                this.options = this.studyList.filter(item => {
                return item.SName.toLowerCase()
                    .indexOf(query.toLowerCase()) > -1;
                });
            } else {
                this.options = this.studyList;
            }
        },
        clearOptions(){
            this.options = this.studyList;
        },
        _getPlanList() {
            let params = {
                ...this.search,
                bPage:(this.currentPage - 1) * this.pageSize + 1,
                bPage1:this.currentPage * this.pageSize,
                bSort:'',
                bSx:''
            }
            getPlanList(params).then((res) => {
                if(res) {
                    this.tableData = res.tableData;
                    this.count = res.total_rows;
                }
            })
        },
        handleSelectionChange(row){
            console.log(row)
            this.tableSelection = row;
        },
        handleSizeChange(val){
            this.pageSize = val;
            this._getPlanList()
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this._getPlanList()
        },
        // 编辑
        handleClickedit(row){
            this.$router.push({path:'/teaching/teachingAdd',query:{id:row.TPID}})
        },
        // 删除
        handleClickdelete(row){
            this.$util.openTips.call(this,'是否确定删除？')
            .then((res) => {
                deletPlanList({bSID:row.TPID}).then((res) => {
                    if(res) {
                        this.$util.tipsMsg('success','删除成功！');
                        this._getPlanList()
                    }
                })
            }).catch((err) => {
                console.log(err)
            })
        },
        handleClicklook(row){
            this.$router.push({path:'/teaching/teachingLook',query:{id:row.TPID}})
        },
        // 全选
        handleClickSelect(){
            this.tableData.forEach(row => {
                this.$refs.table.toggleRowSelection(row,true);
            });
        },
        // 全反选
        handleClickSelectOther(){
            this.tableData.forEach(row => {
                this.$refs.table.toggleRowSelection(row);
            });
        },
        // 添加学生
        addStudyInfo(){
            // this.$refs.addstudy.dialogVisible = true;
            this.$router.push({path:'/teaching/teachingAdd'})
        }
    }
}
</script>
<style lang="less" scoped>

</style>
